.index {
  .vodal-dialog {
    background: url('../assets/images/bg_modal.jpg') no-repeat center;
    background-size: cover;
  }

  .vodal-close:before,
  .vodal-close:after {
    border-radius: 0;
  }

  .banner {
    height: 120vh;
    flex-wrap: wrap;
    position: relative;
    //background: url('../assets/images/proto-background.svg') no-repeat bottom
    //  center;
    background: linear-gradient(to bottom, #255cb5, darken(#0a28b5, 10));
    background-size: cover;

    &:before {
      content: '';
      position: absolute;
      top: 0;
      display: block;
      width: 100%;
      height: 100vh;
      background: url(../assets/images/hero.png) no-repeat center;
      background-size: 90%;
      opacity: 0.3;
      pointer-events: none;
    }

    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      display: block;
      width: 110%;
      margin-left: -5%;
      padding-top: 5%;
      background: url(../assets/images/round-edge.svg) no-repeat center;
      background-size: cover;
    }

    .header-container {
      height: 100px;
      border-bottom: solid 1px rgba(255, 255, 255, 0.15);
      box-sizing: border-box;

      .header {
        width: 1170px;
        height: 88px;
        margin: 0 auto;
        align-items: stretch;

        & > .column {
          display: flex;
          align-items: center;
          padding: 0;
          height: 88px;

          &:not(:first-child) {
            justify-content: flex-end;
          }
        }

        .menu {
          align-items: stretch;
          ul {
            li {
              display: inline-block;
              width: 100px;
              height: 100%;
              line-height: 90px;
              text-align: center;

              a {
                display: block;
                width: 100%;
                height: 100%;
                color: #f5f5f5;
                transition: all 0.3s;
                text-decoration: none;

                &:hover {
                  color: #fe9a00;
                  text-decoration: none;
                  border-bottom: solid 1px #fe9a00;
                  transition: all 0.3s;
                }
              }
            }
          }
        }

        .header-button {
          background: #fe9a00;
          color: #f5f5f5;
          font-size: 16px;
          padding: 0 30px;
          border-radius: 5px;
          transition: background 0.3s;

          &:hover {
            background: darken(#fe9a00, 5%);
            transition: background 0.3s;
          }
        }
      }
    }

    .slogan-container {
      text-align: center;
      margin-top: -3%;

      & > .column {
        padding: 0;
      }

      h1 {
        font-size: 54px;
        color: #fff;
      }

      p {
        font-size: 24px;
        color: lighten(#255cb5, 20%);
        text-align: center;
      }

      button {
        background: #fe9a00;
        border-radius: 100px;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        padding: 0 40px;
        margin-top: 2%;
        transition: background 0.3s;

        &:hover {
          background: darken(#fe9a00, 5%);
          transition: background 0.3s;
        }
      }
    }

    .slogan-footer {
      text-align: center;

      p {
        color: #cbcfe6a6;
        font-size: 12px;
      }

      button {
        margin-top: 20px;
        background-color: transparent;
        color: #cbcfe6a6;
        border-color: #cbcfe6a6;
      }
    }
  }

  .service,
  .solution,
  .case,
  .idea,
  .news {
    width: 1170px;
    text-align: center;
    margin: 100px auto 0;
    flex-wrap: wrap;

    .header {
      .title {
        font-size: 30px;
        color: #666666;
      }

      .split {
        background-image: linear-gradient(-90deg, #255cb5 0%, #fe9a00 100%);
        border-radius: 5px;
        display: inline-block;
        width: 200px;
        height: 1px;
      }

      p {
        font-size: 18px;
        color: #d3d4d6;
        text-align: center;
      }
    }
  }

  .service {
    .grid {
      margin-top: 50px;

      .columns {
        flex-wrap: wrap;

        .column {
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          align-items: center;
          height: 200px;
          transition: all 0.3s;

          &:hover {
            /*box-shadow: 0 30px 100px rgba(0, 0, 0, 0.1);*/
            cursor: pointer;
            .grid-icon {
              transition: all 0.3s;
              transform: scale(1.1);
            }
          }
        }

        .grid-icon {
          padding: 20px;
          img {
            max-width: 50px;
            max-height: 60px;
          }
        }

        .grid-text {
          font-size: 14px;
        }

        .grid-icon,
        .grid-text {
          width: 100%;
        }
      }
    }
  }

  .solution {
    width: 100%;
    background-color: #f7f8fc;
    padding: 100px 0;
    box-shadow: inset 0 1px 0 #00000010;
    margin-top: 50px;
  }

  .case {
    width: 100%;
  }

  .solution-container,
  .case-container {
    width: 100%;
    height: 100%;
    margin: 50px 0 0;
  }

  .solution-container {
    width: 1170px;
    margin: 0 auto;
  }

  .solution-container .swiper-slide {
    font-size: 18px;
    height: 200px;
    padding: 50px 0 10px;

    & > p {
      width: 100%;
      padding: 10px 0;
    }
  }

  .case-container .swiper-slide {
    padding: 30px 0;

    & > img {
      box-shadow: 0 0 30px #00000020;
    }
  }

  .idea {
    width: 100%;
    background-color: #f7f8fc;
    padding: 100px 0 0;
    box-shadow: inset 0 1px 0 #00000010;
    margin-top: 50px;

    .dots_wrapper {
      padding: 0;
    }
  }

  .news {
    .contents {
      display: flex;
      flex-wrap: wrap;
      background-color: #fcfcfc;
      margin: 30px auto;
      width: 600px;
      font-size: 18px;
      font-weight: 200;
      text-align: left;
      color: #fe9a00;

      & > div {
        width: 50%;
        padding: 20px;
        transition: all 0.3s;

        & > a {
          color: #666666;
        }

        &:hover {
          background-color: darken(#fcfcfc, 5%);
          transition: all 0.3s;
        }
      }
    }
  }

  .footer {
    position: relative;
    padding: 0;
    //box-shadow: inset 0 0 30px #00000010;

    //&:after {
    //  content: '';
    //  position: absolute;
    //  display: block;
    //  width: 100%;
    //  height: 100%;
    //  top: 0;
    //  left: 0;
    //  //background: url('http://restapi.amap.com/v3/staticmap?location=104.062608,30.539178&markers=-1,https://i.loli.net/2018/05/15/5af9bd4554ec8.png,0:104.062608,30.539178&size=960*540&scale=2&zoom=14&key=1c4f8a870bb58f50f9bfc88b3c0e2365')
    //  //background: url('https://images.unsplash.com/photo-1490351267196-b7a67e26e41b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c59554fa1001fa338d1d35dfd15bf2a1&auto=format&fit=crop&w=3058&q=80')
    //  //  no-repeat center;
    //  //background-size: cover;
    //  //opacity: 0.1;
    //  pointer-events: none;
    //}

    .service {
      position: relative;
      padding: 3rem 1.5rem 6rem;
      box-shadow: inset 0 0 30px #00000010;
      width: 100%;
      height: 100%;
      z-index: 999;
      background: transparent;

      &:after {
        content: '';
        background: url('../assets/images/bg_modal.jpg') no-repeat center;
        background-size: cover;
        opacity: 0.2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        pointer-events: none;
      }

      & > div {
        width: 1170px;
        height: 150px;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        margin: 0 auto;

        h1 {
          font-size: 24px;
        }

        div {
          width: 100%;
        }
      }
    }

    .contact {
      padding: 1rem 1.5rem 1rem;
      background: #255cb5;
      width: 100%;
      height: 100%;

      & > div {
        width: 1170px;
        display: flex;
        align-items: center;
        flex: 1;
        margin: 0 auto;
        color: #ffffff;
      }
    }
  }
}
